<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康数据监测 - 中医智能诊断系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4A5568',
                        secondary: '#718096'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>
<body class="bg-gray-50">
    <div class="w-[1440px] mx-auto p-6">
        <!-- 导航栏 -->
        <nav class="bg-white p-4 mb-6 shadow-md rounded-lg">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold">中医智能诊断系统</a>
                <div class="flex gap-4">
                    <a href="舌诊AI分析.html" class="text-gray-600">舌诊AI分析</a>
                    <a href="体质评分系统.html" class="text-gray-600">体质评分系统</a>
                    <a href="健康数据监测.html" class="text-primary font-bold">健康数据监测</a>
                    <a href="产后关怀专区.html" class="text-gray-600">产后关怀专区</a>
                    <a href="个人中心.html" class="text-gray-600">个人中心</a>
                    <a href="会员订阅.html" class="text-gray-600">会员订阅</a>
                </div>
            </div>
        </nav>
        
        <!-- 健康数据监测模块 -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
            <h2 class="text-2xl font-bold mb-6">健康数据监测</h2>
            
            <div class="mb-6">
                <div class="flex items-center gap-4">
                    <button class="flex-1 py-2 bg-primary text-white !rounded-button data-tab active" data-tab="all-data">
                        <i class="fas fa-chart-line mr-2"></i>所有数据
                    </button>
                    <button class="flex-1 py-2 bg-gray-100 text-gray-600 !rounded-button data-tab" data-tab="sleep-data">
                        <i class="fas fa-moon mr-2"></i>睡眠数据
                    </button>
                    <button class="flex-1 py-2 bg-gray-100 text-gray-600 !rounded-button data-tab" data-tab="mood-data">
                        <i class="fas fa-smile mr-2"></i>情绪数据
                    </button>
                    <button class="flex-1 py-2 bg-gray-100 text-gray-600 !rounded-button data-tab" data-tab="period-data">
                        <i class="fas fa-calendar-alt mr-2"></i>生理周期
                    </button>
                </div>
            </div>
            
            <div id="all-data" class="data-content block">
                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <div class="bg-gray-50 p-4 rounded-lg mb-6">
                            <h3 class="font-bold mb-4">生理周期日历</h3>
                            <div class="grid grid-cols-7 gap-2">
                                <div class="text-center text-sm text-gray-500">日</div>
                                <div class="text-center text-sm text-gray-500">一</div>
                                <div class="text-center text-sm text-gray-500">二</div>
                                <div class="text-center text-sm text-gray-500">三</div>
                                <div class="text-center text-sm text-gray-500">四</div>
                                <div class="text-center text-sm text-gray-500">五</div>
                                <div class="text-center text-sm text-gray-500">六</div>
                                
                                <div class="text-center p-2">1</div>
                                <div class="text-center p-2">2</div>
                                <div class="text-center p-2 bg-primary text-white rounded-lg">3</div>
                                <div class="text-center p-2">4</div>
                                <div class="text-center p-2">5</div>
                                <div class="text-center p-2">6</div>
                                <div class="text-center p-2">7</div>
                            </div>
                        </div>

                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="font-bold mb-4">睡眠质量</h3>
                            <div id="sleepChart" class="w-full h-[200px]"></div>
                        </div>
                    </div>

                    <div>
                        <div class="bg-gray-50 p-4 rounded-lg mb-6">
                            <h3 class="font-bold mb-4">情绪变化趋势</h3>
                            <div id="moodChart" class="w-full h-[200px]"></div>
                        </div>

                        <div class="space-y-4">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h3 class="font-bold mb-2">今日药膳推荐</h3>
                                <div class="flex gap-4 overflow-x-auto">
                                    <div class="flex-none w-48 food-item" data-food="养生汤">
                                        <img src="https://ai-public.mastergo.com/ai/img_res/d8e45bb7640d01d7d8a3a843fbd483c3.jpg" class="w-full h-32 object-cover rounded-lg mb-2">
                                        <p class="font-medium">养生汤</p>
                                        <p class="text-sm text-gray-600">补气养血</p>
                                    </div>
                                    <div class="flex-none w-48 food-item" data-food="养生茶">
                                        <img src="https://ai-public.mastergo.com/ai/img_res/9b562a7d18bc78a17f654cc247600413.jpg" class="w-full h-32 object-cover rounded-lg mb-2">
                                        <p class="font-medium">养生茶</p>
                                        <p class="text-sm text-gray-600">清热解火</p>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h3 class="font-bold mb-2">调理方案</h3>
                                <ul class="space-y-2 text-gray-600">
                                    <li>
                                        <i class="fas fa-check-circle text-primary mr-2"></i>
                                        早晨空腹喝温开水
                                    </li>
                                    <li>
                                        <i class="fas fa-check-circle text-primary mr-2"></i>
                                        午后适当运动30分钟
                                    </li>
                                    <li>
                                        <i class="fas fa-check-circle text-primary mr-2"></i>
                                        晚上9点前入睡
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="sleep-data" class="data-content hidden">
                <div class="p-6 bg-gray-50 rounded-lg">
                    <h3 class="text-xl font-bold mb-4">睡眠质量详情</h3>
                    <div id="sleepDetailChart" class="w-full h-[400px]"></div>
                    <div class="grid grid-cols-3 gap-6 mt-6">
                        <div class="bg-white p-4 rounded-lg text-center">
                            <h4 class="font-medium text-gray-500">平均睡眠时长</h4>
                            <p class="text-2xl font-bold mt-2">7.3小时</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg text-center">
                            <h4 class="font-medium text-gray-500">深度睡眠</h4>
                            <p class="text-2xl font-bold mt-2">2.1小时</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg text-center">
                            <h4 class="font-medium text-gray-500">入睡时间</h4>
                            <p class="text-2xl font-bold mt-2">22:45</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="mood-data" class="data-content hidden">
                <div class="p-6 bg-gray-50 rounded-lg">
                    <h3 class="text-xl font-bold mb-4">情绪变化详情</h3>
                    <div id="moodDetailChart" class="w-full h-[400px]"></div>
                    <div class="mt-6">
                        <h4 class="font-medium mb-2">情绪影响因素分析</h4>
                        <ul class="space-y-2 text-gray-600">
                            <li>
                                <i class="fas fa-arrow-up text-green-500 mr-2"></i>
                                充足的睡眠对情绪有明显改善
                            </li>
                            <li>
                                <i class="fas fa-arrow-down text-red-500 mr-2"></i>
                                工作压力是情绪波动的主要因素
                            </li>
                            <li>
                                <i class="fas fa-arrow-up text-green-500 mr-2"></i>
                                规律运动有助于稳定情绪
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div id="period-data" class="data-content hidden">
                <div class="p-6 bg-gray-50 rounded-lg">
                    <h3 class="text-xl font-bold mb-4">生理周期详情</h3>
                    <div class="grid grid-cols-2 gap-8">
                        <div>
                            <div id="periodCalendar" class="bg-white p-4 rounded-lg">
                                <div class="grid grid-cols-7 gap-2">
                                    <div class="text-center text-sm text-gray-500">日</div>
                                    <div class="text-center text-sm text-gray-500">一</div>
                                    <div class="text-center text-sm text-gray-500">二</div>
                                    <div class="text-center text-sm text-gray-500">三</div>
                                    <div class="text-center text-sm text-gray-500">四</div>
                                    <div class="text-center text-sm text-gray-500">五</div>
                                    <div class="text-center text-sm text-gray-500">六</div>
                                    
                                    <div class="text-center p-2 bg-red-100 rounded-lg">1</div>
                                    <div class="text-center p-2 bg-red-100 rounded-lg">2</div>
                                    <div class="text-center p-2 bg-primary text-white rounded-lg">3</div>
                                    <div class="text-center p-2 bg-red-100 rounded-lg">4</div>
                                    <div class="text-center p-2 bg-red-100 rounded-lg">5</div>
                                    <div class="text-center p-2">6</div>
                                    <div class="text-center p-2">7</div>
                                    
                                    <div class="text-center p-2">8</div>
                                    <div class="text-center p-2">9</div>
                                    <div class="text-center p-2">10</div>
                                    <div class="text-center p-2">11</div>
                                    <div class="text-center p-2">12</div>
                                    <div class="text-center p-2">13</div>
                                    <div class="text-center p-2">14</div>
                                    
                                    <div class="text-center p-2">15</div>
                                    <div class="text-center p-2">16</div>
                                    <div class="text-center p-2">17</div>
                                    <div class="text-center p-2">18</div>
                                    <div class="text-center p-2">19</div>
                                    <div class="text-center p-2">20</div>
                                    <div class="text-center p-2">21</div>
                                    
                                    <div class="text-center p-2">22</div>
                                    <div class="text-center p-2">23</div>
                                    <div class="text-center p-2">24</div>
                                    <div class="text-center p-2">25</div>
                                    <div class="text-center p-2">26</div>
                                    <div class="text-center p-2">27</div>
                                    <div class="text-center p-2">28</div>
                                    
                                    <div class="text-center p-2 bg-blue-100 rounded-lg">29</div>
                                    <div class="text-center p-2 bg-blue-100 rounded-lg">30</div>
                                    <div class="text-center p-2 bg-blue-100 rounded-lg">31</div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="bg-white p-4 rounded-lg">
                                <h4 class="font-medium mb-4">周期数据</h4>
                                <div class="space-y-4">
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">平均周期长度</span>
                                        <span class="font-bold">28天</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">平均经期长度</span>
                                        <span class="font-bold">5天</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">排卵期预测</span>
                                        <span class="font-bold">12-16日</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">下次月经预计</span>
                                        <span class="font-bold">29日开始</span>
                                    </div>
                                </div>
                                
                                <div class="mt-6">
                                    <h4 class="font-medium mb-2">建议</h4>
                                    <ul class="space-y-2 text-gray-600">
                                        <li>
                                            <i class="fas fa-circle text-red-400 mr-2"></i>
                                            经期注意保暖，避免着凉
                                        </li>
                                        <li>
                                            <i class="fas fa-circle text-blue-400 mr-2"></i>
                                            排卵期可适当增加营养
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 睡眠质量图表
        const sleepChart = echarts.init(document.getElementById('sleepChart'));
        const sleepOption = {
            animation: false,
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [7.5, 6.8, 8.2, 7.0, 6.5, 8.5, 7.8],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#4A5568'
                },
                areaStyle: {
                    color: 'rgba(74, 85, 104, 0.2)'
                }
            }]
        };
        sleepChart.setOption(sleepOption);
    
        // 情绪变化图表
        const moodChart = echarts.init(document.getElementById('moodChart'));
        const moodOption = {
            animation: false,
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [85, 90, 75, 88, 92, 86, 95],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#4A5568'
                }
            }]
        };
        moodChart.setOption(moodOption);
    
        // 初始化睡眠详情图表
        const sleepDetailChart = echarts.init(document.getElementById('sleepDetailChart'));
        const sleepDetailOption = {
            animation: false,
            title: {
                text: '近30天睡眠趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['睡眠时长', '深度睡眠'],
                bottom: '0'
            },
            xAxis: {
                type: 'category',
                data: Array.from({length: 30}, (_, i) => i + 1)
            },
            yAxis: {
                type: 'value',
                name: '小时'
            },
            series: [
                {
                    name: '睡眠时长',
                    type: 'line',
                    data: Array.from({length: 30}, () => (Math.random() * 2 + 6).toFixed(1)),
                    smooth: true,
                    lineStyle: {
                        color: '#4A5568'
                    }
                },
                {
                    name: '深度睡眠',
                    type: 'line',
                    data: Array.from({length: 30}, () => (Math.random() * 1 + 1.5).toFixed(1)),
                    smooth: true,
                    lineStyle: {
                        color: '#718096'
                    }
                }
            ]
        };
        sleepDetailChart.setOption(sleepDetailOption);
    
        // 初始化情绪详情图表
        const moodDetailChart = echarts.init(document.getElementById('moodDetailChart'));
        const moodDetailOption = {
            animation: false,
            title: {
                text: '情绪分类统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '情绪类型',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 45, name: '平静' },
                        { value: 25, name: '愉悦' },
                        { value: 15, name: '焦虑' },
                        { value: 10, name: '疲倦' },
                        { value: 5, name: '压力' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        moodDetailChart.setOption(moodDetailOption);
    
        // 数据标签页切换
        document.querySelectorAll('.data-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有标签页的激活状态
                document.querySelectorAll('.data-tab').forEach(t => {
                    t.classList.remove('bg-primary', 'text-white', 'active');
                    t.classList.add('bg-gray-100', 'text-gray-600');
                });
                
                // 添加当前标签页的激活状态
                tab.classList.remove('bg-gray-100', 'text-gray-600');
                tab.classList.add('bg-primary', 'text-white', 'active');
                
                // 隐藏所有内容区域
                document.querySelectorAll('.data-content').forEach(content => {
                    content.classList.add('hidden');
                });
                
                // 显示当前标签页的内容区域
                document.getElementById(tab.dataset.tab).classList.remove('hidden');
                
                // 重新渲染图表以适应大小变化
                if (tab.dataset.tab === 'sleep-data') {
                    sleepDetailChart.resize();
                } else if (tab.dataset.tab === 'mood-data') {
                    moodDetailChart.resize();
                }
            });
        });
    
        // 药膳推荐点击交互
        document.querySelectorAll('.food-item').forEach(item => {
            item.addEventListener('click', () => {
                const foodName = item.getAttribute('data-food');
                showFoodDetail(foodName);
            });
        });
    
        // 显示药膳详情弹窗
        function showFoodDetail(foodName) {
            // 创建弹窗元素
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            
            let content = '';
            if (foodName === '养生汤') {
                content = `
                    <h3 class="text-xl font-bold mb-4">养生汤详情</h3>
                    <img src="https://ai-public.mastergo.com/ai/img_res/d8e45bb7640d01d7d8a3a843fbd483c3.jpg" class="w-full h-48 object-cover rounded-lg mb-4">
                    <p class="mb-2 text-gray-700">功效：补气养血，增强免疫力</p>
                    <h4 class="font-bold mt-4 mb-2">配方</h4>
                    <ul class="list-disc list-inside text-gray-600 mb-4">
                        <li>当归 10克</li>
                        <li>黄芪 15克</li>
                        <li>红枣 5枚</li>
                        <li>枸杞 10克</li>
                        <li>鸡肉 200克</li>
                    </ul>
                    <h4 class="font-bold mb-2">制作方法</h4>
                    <p class="text-gray-600">将所有材料洗净，放入锅中，加入适量清水，大火煮沸后转小火炖煮1.5小时即可。</p>
                `;
            } else if (foodName === '养生茶') {
                content = `
                    <h3 class="text-xl font-bold mb-4">养生茶详情</h3>
                    <img src="https://ai-public.mastergo.com/ai/img_res/9b562a7d18bc78a17f654cc247600413.jpg" class="w-full h-48 object-cover rounded-lg mb-4">
                    <p class="mb-2 text-gray-700">功效：清热解火，消除疲劳</p>
                    <h4 class="font-bold mt-4 mb-2">配方</h4>
                    <ul class="list-disc list-inside text-gray-600 mb-4">
                        <li>菊花 5克</li>
                        <li>金银花 5克</li>
                        <li>决明子 10克</li>
                        <li>蜂蜜 适量</li>
                    </ul>
                    <h4 class="font-bold mb-2">制作方法</h4>
                    <p class="text-gray-600">将菊花、金银花、决明子放入茶壶中，用沸水冲泡5分钟，加入适量蜂蜜调味即可。</p>
                `;
            }
            
            modal.innerHTML = `
                <div class="bg-white p-6 rounded-lg max-w-md">
                    ${content}
                    <div class="flex justify-end mt-6">
                        <button id="close-modal" class="px-4 py-2 bg-primary text-white rounded-lg">关闭</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // 关闭弹窗
            document.getElementById('close-modal').addEventListener('click', () => {
                document.body.removeChild(modal);
            });
        }
    
        // 自适应调整图表大小
        window.addEventListener('resize', () => {
            sleepChart.resize();
            moodChart.resize();
            
            if (document.querySelector('.data-tab.active').dataset.tab === 'sleep-data') {
                sleepDetailChart.resize();
            } else if (document.querySelector('.data-tab.active').dataset.tab === 'mood-data') {
                moodDetailChart.resize();
            }
        });
    </script>